<template>
  <div class="user-profile">
    <van-nav-bar
          title="个人信息"
          left-text="返回"
          left-arrow
          @click-left="$router.back()"
          class="nav-bar"
     />
     <input
         type="file"
         hidden
         ref="file"
         accept="image/*"
         @change="onFileChange"
      />
     <van-cell  title="头像" is-link center @click="$refs.file.click()">
          <van-image
              width="30"
              height="30"
              round
              fit="cover"
              :src="user.photo"
            />
     </van-cell>
     <van-cell
       title="昵称"
       is-link
       :value="user.name"
       @click="isEditNameShow=true"
     >
     </van-cell>
     <van-cell
         title="性别"
         is-link
         :value="user.gender===0 ? '男':'女' "
         @click="isEditGenderShow=true"
      >
      </van-cell>
     <van-cell
         title="生日"
         is-link
         :value="user.birthday"
        @click="isEditBirthdayShow=true"
      >
      </van-cell>

      <!-- 修改昵称 -->
      <van-popup
        v-model="isEditNameShow"
        position="bottom"
        :style="{ height: '100%' }"
        class="pop"
       >
       <!--
            当你传递子组件的数据既要使用又要修改，例如这里的name
            这种情况下我们可以使用v-mmodel简写

             v-model="user.name"
              :value="user.name" 默认名字叫value
              默认监听 @input="user.name=$event"

            v-model只能使用一次

            如果有多个数据需要保持同步，使用.sync修饰符
            :xx.sync="user.xxx"->:gener=user.gender
          默认监听 @update:属性名称-》update:gener

        -->
         <updata-name
            @close="isEditNameShow=false"
            v-model="user.name"
            v-if="isEditNameShow"
         />
      </van-popup>
      <!-- 修改性别 -->
      <van-popup
         v-model="isEditGenderShow"
         position="bottom"

      >
          <updata-gender
           @close="isEditGenderShow=false"
           v-model="user.gender"
           v-if="isEditGenderShow"
          />
      </van-popup>
      <!-- 修改生日 -->
      <van-popup
         v-model="isEditBirthdayShow"
         position="bottom"
      >
        <updata-birthday
            v-if="isEditBirthdayShow"
            @close="isEditBirthdayShow=false"
            v-model="user.birthday"
        />
      </van-popup>
      <!-- 修改头像 -->
      <van-popup
        v-model="isEditPhotoShow"
        position="bottom"
        :style="{ height: '100%' }"
         class="photo-pop"
      >
        <updata-photo
           :file="previewImage"
           @close="isEditPhotoShow=false"
           @update-photo="user.photo=$event"
           v-if="isEditPhotoShow"
        />
      </van-popup>
  </div>
</template>

<script>
import { getUserProfile } from '@/api/user.js'
import updataName from './components/updata-name.vue'
import updataGender from './components/updata-gender.vue'
import updataBirthday from './components/updata-birthday.vue'
import updataPhoto from './components/updata-photo.vue'
export default {
  name: 'userProfile',
  components: {
    updataName,
    updataGender,
    updataBirthday,
    updataPhoto
  },
  directives: { },

  data() {
    return {
         user:{},//用户数据
         isEditNameShow:false, //修改昵称弹窗
         isEditGenderShow:false, //修改性别弹窗
         isEditBirthdayShow:false,//修改生日弹窗
         isEditPhotoShow:false,//修改头像弹窗
         previewImage:null //上传预览图片
    };
  },
  created() {
    this.loadUserProfile()
  },
  mounted() {

  },

  methods: {
     async loadUserProfile(){
          const {data} =   await getUserProfile()
          console.log(data)
          this.user=data.data
      },
      onFileChange(){
        //在弹出层中显示图片
        const  file=this.$refs.file.files[0]
        // const blob=window.URL.createObjectURL(this.$refs.file.files[0])
        this.previewImage=file;
        //展示弹出层
        this.isEditPhotoShow=true
        //为了解决相同文件不触发change事件，清空file的value
         this.$refs.file.value=''
      }
  },
};
</script>

<style lang="less" scoped>
.pop{
  background:#f5f7f9 ;
}
.photo-pop{
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
